﻿<script setup lang="ts" name="EpNotice">
import { Message, successMessage, warnMessage, errorMessage } from '@/utils/message'
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const open1 = () => {
  ElMessage({
    showClose: true,
    message: '信息消息提示',
    type: 'info',
    duration: 0
  })
}
const open2 = () => {
  ElMessage({
    showClose: true,
    message: '成功消息提示',
    type: 'success',
    duration: 0
  })
}
const open3 = () => {
  ElMessage({
    showClose: true,
    message: '警告消息提示',
    type: 'warning',
    duration: 0
  })
}
const open4 = () => {
  ElMessage({
    showClose: true,
    message: '错误消息提示',
    type: 'error',
    duration: 0
  })
}

const open5 = () => {
  Message('信息消息提示')
}
const open6 = () => {
  successMessage('成功消息提示')
}
const open7 = () => {
  warnMessage('警告消息提示')
}
const open8 = () => {
  errorMessage('错误消息提示')
}

const open9 = () => {
  ElNotification({
    title: '消息',
    message: '信息消息提示',
    type: 'info',
    duration: 0
  })
}
const open10 = () => {
  ElNotification({
    title: '成功',
    message: '成功消息提示',
    type: 'success',
    duration: 0
  })
}
const open11 = () => {
  ElNotification({
    title: '警告',
    message: '警告消息提示',
    type: 'warning',
    duration: 0
  })
}
const open12 = () => {
  ElNotification({
    title: '错误',
    message: '错误消息提示',
    type: 'error',
    duration: 0
  })
}
</script>
<template>
  <el-space :size="systemConfig.space" fill>
    <el-row :gutter="systemConfig.space">
      <el-col :md="12" :sm="24" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>Alert 消息提示（浅色主题）</span>
            </div>
          </template>
          <h3>基础用法</h3>
          <el-alert title="成功提示" type="success" show-icon />
          <el-alert title="信息提示" type="info" show-icon />
          <el-alert title="警告提示" type="warning" show-icon />
          <el-alert title="错误提示" type="error" show-icon />
          <h3>带描述用法</h3>
          <el-alert title="成功提示" description="带描述的提示，显示更多提示文本" type="success" show-icon />
          <el-alert title="信息提示" description="带描述的提示，显示更多提示文本" type="info" show-icon />
          <el-alert title="警告提示" description="带描述的提示，显示更多提示文本" type="warning" show-icon />
          <el-alert title="错误提示" description="带描述的提示，显示更多提示文本" type="error" show-icon />
        </el-card>
      </el-col>
      <el-col :md="12" :sm="24" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>Alert 消息提示（深色主题）</span>
            </div>
          </template>
          <h3>基础用法</h3>
          <el-alert title="成功提示" type="success" show-icon effect="dark" />
          <el-alert title="信息提示" type="info" show-icon effect="dark" />
          <el-alert title="警告提示" type="warning" show-icon effect="dark" />
          <el-alert title="错误提示" type="error" show-icon effect="dark" />
          <h3>带描述用法</h3>
          <el-alert title="成功提示" description="带描述的提示，显示更多提示文本" type="success" show-icon effect="dark" />
          <el-alert title="信息提示" description="带描述的提示，显示更多提示文本" type="info" show-icon effect="dark" />
          <el-alert title="警告提示" description="带描述的提示，显示更多提示文本" type="warning" show-icon effect="dark" />
          <el-alert title="错误提示" description="带描述的提示，显示更多提示文本" type="error" show-icon effect="dark" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="systemConfig.space">
      <el-col :md="8" :sm="8" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>Message 消息提示</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-button type="info" :plain="true" @click="open1">消息</el-button>
              <el-button type="success" :plain="true" @click="open2">成功</el-button>
              <el-button type="warning" :plain="true" @click="open3">警告</el-button>
              <el-button type="danger" :plain="true" @click="open4">错误</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :md="8" :sm="8" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>Message 消息提示（封装用法）</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-button type="info" :plain="true" @click="open5">消息</el-button>
              <el-button type="success" :plain="true" @click="open6">成功</el-button>
              <el-button type="warning" :plain="true" @click="open7">警告</el-button>
              <el-button type="danger" :plain="true" @click="open8">错误</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :md="8" :sm="8" :xs="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>Notification 通知提示</span>
            </div>
          </template>
          <el-form>
            <el-form-item>
              <el-button type="info" :plain="true" @click="open9">消息</el-button>
              <el-button type="success" :plain="true" @click="open10">成功</el-button>
              <el-button type="warning" :plain="true" @click="open11">警告</el-button>
              <el-button type="danger" :plain="true" @click="open12">错误</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-alert+.el-alert {
  margin-top: var(--el-space)
}
</style>
